import React, { useState } from 'react';
import { Divider, Radio, Table, Space, Tag, Button, Modal, Input, Select, Form, Pagination, Popconfirm } from 'antd';
import type { TableColumnsType, FormProps, PaginationProps } from 'antd';
import { useAppDispatch, useAppSelector } from '@/store/reactreduxts';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { async_searchlist, async_dellist } from '@/store/crmsSlice';
import Myfrom from './Myfrom';


const ShopList: React.FC = () => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');

  //获取数据
  let obj = useAppSelector(state => state.crms1)
  console.log(obj);
  let dispatch = useAppDispatch()

  //控制对话框的显示和隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //控制对话框的标题
  let [title, setTitle] = useState('')
  //编辑={...} 添加={}
  let [itemobj, setItemobj] = useState({})

  //表头
  const columns: TableColumnsType<any> = [
    {
      title: '岗位编号',
      dataIndex: 'bianhao',
    },
    {
      title: '岗位编码',
      dataIndex: 'bianma',
    },
    {
      title: '岗位名称',
      dataIndex: 'title',
    },
    {
      title: '岗位排序',
      dataIndex: 'paixu',
    },
    {
      title: '岗位状态',
      dataIndex: 'zhuangt',
      render: (zhuangt) => {
        console.log(zhuangt);

        return <Tag color={zhuangt ? 'blue' : 'red'}>
          {zhuangt ? '正常' : '异常'}
        </Tag>
      }
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      render: (time) => {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            //显示
            showModal()
            //标题
            setTitle('修改')
            setItemobj(record)
          }}><><EditOutlined /></>修改</a>
          <Popconfirm
            title="提示"
            description="确定删除吗?"
            onConfirm={() => {
              //执行删除的方法
              dispatch(async_dellist(record.id))
            }}
            okText="Yes"
            cancelText="No"
          >
            <a><><DeleteOutlined /></>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];




  /* 分页 */
  /* 定义分页的状态 有多少页数 */
  let [current, setCurrent] = useState(1)
  /* 定义每页有多少条数据 */
  let [pageSize, setPageSize] = useState(2)
  /* 定义一共有多少条数据 */
  let [total, setTotal] = useState(obj.shoplist.length)

  /* 搜索表单状态 */
  const [searchParams, setSearchParams] = useState({});
  // 分页变化处理
  const handlePageChange = (page: number, pageSize: number) => {
    setCurrent(page);
    setPageSize(pageSize);
    // 传递当前分页参数和搜索条件
    dispatch(async_searchlist({
      ...searchParams,
      _page: page,
      _limit: pageSize
    }));
  };


  const onFinish = (values: any) => {
    let obj = {
      ...values
    }
    // console.log(values);

    dispatch(async_searchlist(obj))
  };

  const [form] = Form.useForm();
  //重置
  const chongzhi = () => {
    form.resetFields()
    dispatch(async_searchlist({}))
  }

  return (
    <div>
      <Form layout="inline" onFinish={onFinish} form={form}>
        <Form.Item label='岗位编码' name='bianma'>
          <Input placeholder='请输搜索' />
        </Form.Item>
        <Form.Item label='岗位名称' name='title'>
          <Input placeholder='请输搜索' />
        </Form.Item>
        <Form.Item label='岗位状态' name='zhuangt'>
          <Select
            style={{ width: 120 }}
            options={[
              { value: true, label: '正常' },
              { value: false, label: '异常' },
            ]}
          />
        </Form.Item>
        <Button htmlType="submit">搜索</Button>
        <Button onClick={chongzhi}>重置</Button>
      </Form>

      {/* 对话框 */}
      <div>
        <>
          <Button type="primary" style={{ margin: '10px 0' }}
            onClick={() => {
              //显示
              showModal()
              //标题
              setTitle('添加')
              setItemobj({})
            }}>
            添加
          </Button>
          <Modal
            title={title}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={null}
          >
            <Myfrom handleOk={handleOk} title={title} itemobj={itemobj}></Myfrom>
          </Modal>
        </>
      </div>

      {/* 表格渲染 */}
      <Table<any>
        rowSelection={{ type: selectionType }}
        columns={columns}
        dataSource={obj.shoplist}
        rowKey={'id'}
        pagination={{
          current,//当前页数
          pageSize,//每页条数
          total,//一共有多少数据
          pageSizeOptions: [1, 2, 3],//指定每页显示多少条
          showSizeChanger: true, //是否展每页多少数据容器
          showQuickJumper: true,//是否可以快速跳转到某页
          onChange: handlePageChange
        }}
      />
    </div >
  );
};

export default ShopList;
